<template>
<div style="height: 650px;border: 10px solid red;">
  <h1 style="color: black; text-align: center;">轮播图</h1>
</div>
</template>

<script setup>
</script>

<style lang="less" scoped>
.carousel-container {
  margin: 0 auto;
  width: 80%;
  
  :deep(.el-carousel) {
    .el-carousel__item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      .carousel-item {
        position: relative;
        width: 100%;
        height: 100%;
        
        .carousel-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
        
        .image-title {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          color: white;
          padding: 20px;
          font-size: 18px;
          text-align: center;
        }
      }
    }
    
    .el-carousel__item.is-active {
      .carousel-image {
        transform: scale(1.05);
      }
    }
    
    .el-carousel__arrow {
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      font-size: 24px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    
    .el-carousel__indicators {
      .el-carousel__button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #c0c4cc;
      }
      
      .is-active {
        .el-carousel__button {
          background-color: #409eff;
        }
      }
    }
  }
}
</style>